<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="userForm" label-width="auto" label-position="right">
				<div class="leftInput">
					<div class="item">
						<el-form-item :label="$t('theatre_data.theatre_name')" prop="theatreName">
							<!-- <span class="el-form-item__label">{{ form.theatreName }}</span> -->
							<el-input v-model="form.theatreName" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('movie_data.officialWebsite')" prop="officialSite" >
							<el-input v-model="form.officialSite" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('brand_data.email')">
							<el-input v-model="form.officialEmail" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('movie_data.officialSiteAddress')" prop="officialAddress" >
							<el-input v-model="form.officialAddress" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<!-- <div class="item">
						<el-form-item :label="$t('user_data.userName')" prop="theatreName">
							<el-input v-model="form.theatreName" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div> -->
					<el-form-item :label="$t('brand_data.form.zipCode')" prop="postalCode" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-input type="text" style="width:28%" v-model="form.postalCode" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
							-
							<el-input type="text" style="width:68%" v-model="form.postalNo" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
					<el-form-item :label="$t('brand_data.phone')" prop="phoneCode" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-input type="text" style="width:28%" v-model="form.phoneCode" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
							-
							<el-input type="text" style="width:68%" v-model="form.phoneNo" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
					<!-- <div class="item">
						<div class="phonebox">
							<el-form-item style="width: 50%" :label="$t('user_data.form.phoneCode')">
								<el-input style="width:100%" v-model="form.phoneCode" clearable :disabled="disabled"></el-input>
							</el-form-item>
							<el-form-item style="width: 50%;margin-left: 10px;" :label="$t('user_data.form.phone')">
								<el-input style="width: 100%" v-model="form.phoneNo" clearable :disabled="disabled" :placeholder="$t('formRule.phoneholder')"></el-input>
							</el-form-item>
						</div>
					</div> -->
					<!-- <div class="item">
						<el-form-item :label="$t('user_data.location')" prop="area">
							<el-input v-model="form.area" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div> -->
					<div class="item">
						<el-form-item :label="$t('user_data.form.count')" prop="country">
							<el-input v-model="form.country" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.prov')" prop="prefecture">
							<el-input v-model="form.prefecture" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.city')" prop="city">
							<el-input v-model="form.city" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.streetAddress')" prop="streetAddress">
							<el-input v-model="form.streetAddress" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.recName')" prop="recipientName">
							<el-input v-model="form.recipientName" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('theatre_data.longitude')" prop="longitude" >
							<el-input v-model="form.longitude" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('theatre_data.dimension')" prop="latitude" >
							<el-input v-model="form.latitude" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.head')" prop="avatar">
							<img :src="form.avatar" v-if="disabled" class="head">
							<sc-upload v-else v-model="form.avatar" :title="$t('user_data.headText')" :isMark="false" :action="action"  @getFile="getFile" fileType="avatar" @onSuccess="headCallBack"></sc-upload>
							<div class="tips">{{ $t('components.upload.headSizeTips') }}</div>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.background')" prop="background">
							<img :src="form.background" v-if="disabled" class="background">
							<sc-upload v-else v-model="form.background" width="500px" height="86px" :title="$t('user_data.backgroundText')" :isMark="false" :action="action" @getFile="getFile" fileType="bgImage" @onSuccess="backCallBack"></sc-upload>
							<div class="tips">{{ $t('components.upload.creatorSizeTips') }}</div>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.qrcode')" prop="background">
							<div style="display: flex;flex-direction: column;">
								<div class="qrcodeBox">
									<sc-qr-code :text="setURL" logo="favicon.ico" size="160"></sc-qr-code>
									<span>{{ form.theatreName }}</span>
								</div>
								<el-button class="downloadBtn" type="warning" @click="downloadImg">Download</el-button>
							</div>
							<!-- <div class="tips">{{ $t('components.upload.saveTips') }}</div> -->
						</el-form-item>
					</div>
				</div>
				<div class="rightInput">
					<div class="item">
						<el-form-item :label="$t('user_data.desc')" prop="introduction.en_US">
							<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.en_US" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item label="&#12288;" prop="introduction">
							<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.ja_JP" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item label="&#12288;" prop="introduction">
							<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.zh_CN" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item label="&#12288;" prop="introduction">
							<el-input type="textarea" rows="6" resize="none" v-model="form.introduction.zh_TW" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.Twitter')" prop="snsTwitter">
							<el-input v-model="form.snsTwitter" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.Facebook')" prop="snsFacebook">
							<el-input v-model="form.snsFacebook" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.Instagram')" prop="snsInstagram">
							<el-input v-model="form.snsInstagram" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
					<div class="item">
						<el-form-item :label="$t('user_data.form.snsYoutube')" prop="snsYoutube">
							<el-input v-model="form.snsYoutube" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
				</div>
			</el-form>
		</div>
		<div v-if="showProp">
			<sCDialog :modelValue="showProp" :showFullscreen="false" @closeDialog="openUploadFile" :closeOnClickModal="false">
				<template v-slot:header>
					{{ $t('brand_data.createCinemaTitle') }}
				</template>
				<div class="cont">
					<el-form :model="form" :rules="rules" ref="userForm" label-width="auto" label-position="right" style="flex-wrap: wrap">
						<div class="item">
							<el-form-item :label="$t('account_data.accountEmail')" prop="accountEmail">
								<el-input v-model="form.accountEmail" clearable></el-input>
							</el-form-item>
						</div>
						<div class="item">
							<el-form-item :label="$t('account_data.password')" prop="password">
								<el-input type="password" v-model="form.password" clearable show-password></el-input>
							</el-form-item>
						</div>
					</el-form>
				</div>
				<template v-slot:footer>
					<el-button @click="showProp=false" >{{$t('table_data.cancelText')}}</el-button>
					<el-button type="primary" :loading="isSaveing" @click="submit('upload')">{{$t('table_data.saveText')}}</el-button>
				</template>
			</sCDialog>
		</div>
		<div id="footer" v-if="!disabled">
			<!-- <el-button @click="visible=false" >{{$t('table_data.cancelText')}}</el-button> -->
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
import sCDialog from "@/components/scDialog"
import html2canvas from "html2canvas"

	export default {
		components: {
			sCDialog,
			html2canvas
		},
		emits: ['success', 'closed'],
		data() {
			var checkPostalCode = (rule, value, callback) => {
				if (!this.form.postalCode||!this.form.postalNo) {
					return callback(new Error(this.$t('formRule.inputPlaceholder')));
				} else {
					callback()
				}
			};
			var checkPhoneCode = (rule, value, callback) => {
				if (!this.form.phoneCode||!this.form.phoneNo) {
					return callback(new Error(this.$t('formRule.inputPlaceholder')));
				} else {
					callback()
				}
			};
			var checkName = (rule, value, callback) => {
				if (this.form.lastName.en_US||this.form.lastName.ja_JP||this.form.lastName.zh_CN||this.form.lastName.zh_TW) {
					callback()
				} else {
					return callback(new Error(this.$t('formRule.leastUserName_rule')));
				}
			};
			var checkLastName = (rule, value, callback) => {
				if (this.form.firstName.en_US||this.form.firstName.ja_JP||this.form.firstName.zh_CN||this.form.firstName.zh_TW) {
					callback()
				} else {
					return callback(new Error(this.$t('formRule.leastUserName_rule')));
				}
			};
			var checkCreatorName = (rule, value, callback) => {
				if (this.form.creatorName.en_US||this.form.creatorName.ja_JP||this.form.creatorName.zh_CN||this.form.creatorName.zh_TW) {
					callback()
				} else {
					return callback(new Error(this.$t('formRule.leastUserName_rule')));
				}
			};
			return {
				mode: "add",
				showProp: false,
				action: this.$API.upload.upload,
				disabled: false,
				langList: [
					{
						name: '简体中文',
						value: 'zh_CN',
					},
					{
						name: '繁體中文',
						value: 'zh_TW',
					},
					{
						name: 'English',
						value: 'en_US',
					},
					{
						name: '日本語',
						value: 'ja_JP',
					}
				],
				typeList: [
					{
						name: this.$t('user_data.userType.type1'),
						value: 1,
					},
					{
						name: this.$t('user_data.userType.type2'),
						value: 2,
					}
				],
				statusList: [
					{
						name: this.$t('user_data.status.type1'),
						value: 0||3,
					},
					{
						name: this.$t('user_data.status.type2'),
						value: 1,
					},
					{
						name: this.$t('user_data.status.type3'),
						value: 2,
					},
					{
						name: this.$t('user_data.status.type4'),
						value: 9,
					}
				],
				sexlist: [
					{
						value: 'M',
						name: this.$t('user_data.sex.male'),
					},
					{
						value: 'F',
						name: this.$t('user_data.sex.female'),
					},
					{
						value: 'O',
						name: this.$t('user_data.sex.other'),
					},
				],
				titleMap: {
					add: this.$t('table_data.adduserTitle'),
					edit: this.$t('table_data.userTitle')
				},
				userType: 0,
				locationArr: [{
          value: 'ja',
          label: 'Japanese'
        }, {
          value: 'en',
          label: 'English'
        }, {
          value: 'chs',
          label: '中文简体'
        }, {
          value: 'cht',
          label: '中文繁體'
        }],
				// lastName: {
				// 	en_US: '',
				// 	ja_JP: '',
				// 	zh_CN: '',
				// 	zh_TW: '',
				// },
				// firstName: {
				// 	en_US: '',
				// 	ja_JP: '',
				// 	zh_CN: '',
				// 	zh_TW: '',
				// },
				proslist: [],
				form: {
					officialSite: "",
					"accountEmail": "",
					"password": "",
					"creatorName": {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
					},
					"contractAddress": null, 
					"professionName": null, 
					"userId": "",
					"eoa": "",
					"email": "",
					"userType": null,
					"loginType": null,
					"status": null,
					"firstName": {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
					},
					"lastName": {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
					},
					"userName": null,
					"avatarFileId": null,
					"avatar": null,
					"backgroundFileId": null,
					"background": null,
					"introduction": {zh_TW: null,zh_CN: null,en_US:null,ja_JP:null},
					"sex": null,
					"phoneCode": null,
					"country": null,
					"prefecture": null,
					"city": null,
					"snsTwitter": null,
					"snsInstagram": null,
					"snsFacebook": null,
					"locale": "",
					"birth": "",
					"phoneNo": "",
				},
				rules: {
					"accountEmail": [
						{required: true, message: this.$t('formRule.inputPlaceholder'), trigger: 'blur'}
					],
					"password": [
						{required: true, message: this.$t('formRule.inputPlaceholder'), trigger: 'blur'}
					],
					"theatreName": [
						{required: true, message: this.$t('formRule.inputPlaceholder'), trigger: 'blur'}
					],
					"officialAddress": [
						{required: true, message: this.$t('formRule.inputPlaceholder'), trigger: 'blur'}
					],
					"status": [
						{required: true, message: this.$t('formRule.status_rule'), trigger: 'change'}
					],
					"birth": [
						{required: true, message: this.$t('formRule.birth_rule'), trigger: 'change'}
					],
					"postalCode": [
						{required: true, validator: checkPostalCode, trigger:'blur'}
					],
					"phoneCode": [
						{required: true, validator: checkPhoneCode, trigger:'blur'}
					],
					"last_name": [
						{required: true, validator: checkName, trigger: 'change'}
					],
					"first_name": [
						{required: true, validator: checkLastName, trigger: 'change'}
					],
					"creatorName": [
						{required: true, validator: checkCreatorName, trigger: 'change'}
					],
				},
				visible: false,
				isSaveing: false
			}
		},
		watch: {
			'form.userType'(e){
				if(e==2)this.getProfession()
			}
		},
		computed: {
			setURL(){
				// return function(){
					return process.env.VUE_APP_WEBSITE+'/movie?cinemaId='+this.form.theatreId
				// }
			}
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'&&this.$route.query.id != 'add'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.theatreDetail'):this.$t('menu.theatreEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo()
			}
		},
		methods: {
			downloadImg(){
				const width=document.querySelector(".qrcodeBox").offsetWidth
				const height=document.querySelector(".qrcodeBox").offsetHeight//包裹容器的高度
				let a = document.createElement('a');
				html2canvas(document.querySelector(".qrcodeBox"), {
					width, //画布的宽度，即生成图片的宽度
					height,//画布的宽度，同上
					dpi: window.devicePixelRatio*5 , // 对应屏幕的dpi，适配高清屏，解决canvas模糊问题
					scale: 2, // 缩放
					useCORS: true, // 是否使用图片跨域，如何使本地图片不用配置
				}).then(canvas =>{
					let dom = document.body.appendChild(canvas);
					dom.style.display = 'none';
					a.style.display = 'none';
					document.body.removeChild(dom);
					let blob = this.dataURLToBlob(dom.toDataURL('image/png'));
					a.setAttribute('href', URL.createObjectURL(blob));
					//这块是保存图片操作  可以设置保存的图片的信息
					a.setAttribute('download', this.form.theatreName||'cinema' + '.png');
					document.body.appendChild(a);
					a.click();
					URL.revokeObjectURL(blob);
					document.body.removeChild(a);
				});
			},
			dataURLToBlob(dataurl) {
				let arr = dataurl.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], { type: mime });
			},
			headCallBack(res){
				if(res&&res.code == 'OK')this.form.avatarFileId = res.data.file_id
			},
			backCallBack(res){
				if(res.data)this.form.backgroundFileId = res.data.file_id
			},
			async getInfo(){
				try {
					let id = this.$route.query.id;
					const res = await this.$API.brand_theatre.theatreDetail.get(id);
					this.form = res.data;
					if(!this.form.creatorName)this.form.creatorName = {"en_US": "","ja_JP": "","zh_CN": "","zh_TW": ""}
					this.userType = this.form.userType;
					if(this.form.userType==2){this.getProfession()}
				}catch(e){
					console.log(`error`,e)
				}
			},
			async getProfession(){
				const params = {
					lang: this.$i18n.locale
				}
				const res = await this.$API.user.getProfession.get(params);
				this.proslist = res.data;
			},
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(type){
				this.$refs.userForm.validate(async (valid) => {
					if (valid) {
						if(this.$route.query.type != 'edit')this.showProp = true;
						if(type=='upload' || this.$route.query.type == 'edit'){
							this.isSaveing = true;
							var res = await this.$API.brand_theatre.theatreUpload.post(this.form);
							this.isSaveing = false;
							if(res.code == 'OK'){
								this.$emit('success', this.form, this.mode)
								this.visible = false;
								this.$message.success(this.$t('table_data.operasucc'))
								// this.getInfo();
								this.closeTag()
							}else{
								this.$alert(((res.field||'') + res.message), this.$t('table_data.tips'), {type: 'error'})
							}
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
:deep .sc-upload__img-actions {
	left: 0;
}
.el-form {
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: space-between;
	align-items: flex-start;
}
.qrcodeBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	color: #000;
	border: 2px solid #c0c0c0;
	border-radius: 8px;
	padding: 8px;
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
  overflow: hidden;
}
.downloadBtn {
	margin-top: 10px;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 140px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 100px;
}
.leftlabel::before{
	content: "*";
	color: var(--el-color-danger);
	margin-right: 4px;
}
.item-address {
	height: 76px;
}
.phonebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.el-select {
	width: 100%;
}
.item-firstName,.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	height: 100px;
	width: 50%;
}
.head {
	width: 150px;
  height: 150px;
}
.background {
	width: 500px;
	height: 300px;
}
.leftInput {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	/* height: 82px; */
	width: 48%;
}
.rightInput {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	/* height: 82px; */
	width: 48%;
}
.name-item {
	margin-right: 20px;
	margin-bottom: 20px;
	width: auto;
}
/* .rightInput .el-input {
	width: 46%;
} */
.item-left .el-form-item__content .el-input {
	width: 46%;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 100px;
}
#footer {
	display: flex;
	justify-content: center;
}

/*  手机 */
@media only screen and (max-width: 750px) {
	.el-form {
		flex-direction: column;
	}
	.leftInput,.rightInput {
		width: 100%;
	}
	:deep .el-form-item__label-wrap{
		margin-left: 0 !important;
	}
}
/* pc */
@media only screen and (min-width: 750px) {
	
}
</style>
